<template>
  <div class="pay">
    <div class="underline" style="width: 120px">
      <span class="title1 color1 zIndex fontBold">我的订单</span>
    </div>
    <div class="login_content">
      <div class="content">
        <div class="contentInfo">
          <div class="contentInfoBox flex justify_between flex_column">
            <p class="font400 content3 color3">
              <span v-if="route.query.pay_type == 1">会费</span>
              <span v-if="route.query.pay_type == 2">活动报名</span>
              <span v-if="route.query.pay_type == 3">课程报名</span>
              / {{ data.title }}
            </p>
            <p class="font400 content2 color6">
              {{ data.create_time }}
            </p>
          </div>
        </div>
        <div
          class="signNum flex justify_between align_center"
          v-if="route.query.pay_type == 2"
        >
          <p class="font400 content3 color3">报名人数</p>
          <p class="count_num font400 color6 content3">
            {{ data.user_ids.length }}
          </p>
        </div>
        <div
          class="signNum flex justify_between align_center"
          @click="showInt"
          v-if="
            route.query.pay_type == 2 ||
            (route.query.pay_type == 3 && integralStatus.length > 0)
          "
        >
          <p class="font400 content3 color3 flex align_center">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-jifenzhongxin" />
            </svg>
            积分
          </p>
          <p class="font400 color6 content3">
            {{ setValue ? setValue : "前往使用>" }}
          </p>
        </div>
        <div class="paySet" v-if="integralStatus2.length > 0">
          <div class="title fontBold content3 color3">支付方式</div>
          <van-radio-group v-model="checked">
            <van-cell-group inset>
              <div v-for="(i, b) in data.pay_method" :key="b">
                <van-cell
                  v-for="(item, index) in paymentList"
                  :key="index"
                  clickable
                  v-show="item.type == i"
                  :border="b > 1 ? true : false"
                >
                  <template #title>
                    <div class="flex align_center">
                      <svg class="icon" aria-hidden="true">
                        <use :href="item.icon" />
                      </svg>
                      <span class="font400 color6 content3">{{ item.name }}</span>
                    </div>
                  </template>
                  <template #right-icon>
                    <van-radio :name="item.type" checked-color="#FF7A1F" />
                  </template>
                </van-cell>
              </div>
            </van-cell-group>
          </van-radio-group>
        </div>
      </div>
    </div>
  </div>
  <div class="fexd_footer">
    <div class="footer_btn flex align_center justify_between">
      <div class="font400 content3 color4" @click="back">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fanhui" />
        </svg>
        <p class="content2 font400 color3">返回</p>
      </div>
      <div class="flex align_center">
        <span class="fontBold content3 color2">￥{{ price }}</span>
        <div @click="submit" class="agree font400 content3 color4">提交订单</div>
      </div>
    </div>
  </div>
  <!-- 积分支付 -->
  <van-popup v-model:show="show" round position="bottom">
    <div class="integral">
      <p class="integral_title fontBold color1 content4">使用积分</p>
      <div class="integral_box flex justify_between align_center">
        <div class="integral_left flex align_center">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-jifenzhongxin" />
          </svg>
          <span class="font400 content3 color3">当前积分:{{ integral.integral }}</span>
        </div>
        <div class="integral_right">
          <van-stepper
            integer
            v-model="value"
            input-width="80px"
            :max="integral.integral"
            :min="0"
          />
          <div class="all font400 content2 color4" @click="addValue">全部使用</div>
        </div>
      </div>
      <p class="font400 content2 color2 integralTips">*积分支付部分不支持开发票</p>
      <div @click="confirm" class="btn font400 content2 color4">确认</div>
    </div>
  </van-popup>
</template>

<script setup lang="ts">
import { throttle } from '@/util/index'
import { ref } from 'vue'
import { Dialog, Toast } from 'vant'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { orderCreate, orderGetCharge, getUserIntegral, chooseIntegral } from '@/api/index'
const router = useRouter()
const route = useRoute()
const store = useStore()
const checked: any = ref([])
const data: any = ref([])
const value: any = ref(0)
const show: any = ref(false)
const price: any = ref(0)
const integralPush: any = ref(0)
const setValue: any = ref(0)
const integral: any = ref([])
const integralStatus: any = ref([])
const integralStatus2: any = ref([])
const paymentList: any = ref([
  {
    name: '银行转账',
    type: 2,
    icon: '#icon-zhifu-yinlian'
  },
  {
    name: '微信支付',
    type: 1,
    icon: '#icon-weixinzhifu'
  }
])

const getOrder = async () => {
  data.value = await orderGetCharge({ price_id: route.query.price_id, pay_type: route.query.pay_type, level_id: route.query.level_id, paid_id: route.query.paid_id, user_ids: route.query.user_ids ? JSON.parse(route.query.user_ids) : '' })
  integralStatus.value = data.value.pay_method.filter((item:any) => item === '3')
  integralStatus2.value = data.value.pay_method.filter((item:any) => item < 3)
  price.value = data.value.price
}

getOrder()

const back = () => {
  if (store.state.from.path !== '/') {
    router.back()
  } else {
    router.replace('/')
  }
}

const showInt = async () => {
  try {
    integral.value = await getUserIntegral()
    show.value = true
  } catch (error: any) {
    Toast(error.message)
  }
}

const addValue = async () => {
  value.value = integral.value.integral
}

const createOrder = async () => {
  try {
    const res: any = await orderCreate({ price_id: route.query.price_id, pay_type: route.query.pay_type, company_level: route.query.level_id, paid_id: route.query.paid_id, integral: integralPush.value, user_ids: route.query.user_ids ? JSON.parse(route.query.user_ids) : '', pay_method: integralStatus2.value.length <= 0 ? 3 : checked.value })
    if (res.pay_method === '2') {
      if (route.query.active_id) {
        // active_id  用于订单详情返回活动详情 book_id  用于订单详情返回预约详情
        router.replace({ path: '/applyOf', query: { type: 2, orderId: res.order_id, active_id: route.query.active_id } })
        sessionStorage.removeItem('user_ids')
      } else if (route.query.book_id) {
        router.replace({ path: '/applyOf', query: { type: 2, orderId: res.order_id, book_id: route.query.book_id } })
      } else {
        router.replace({ path: '/applyOf', query: { type: 2, orderId: res.order_id } })
      }
    } else if (res.pay_method === '1') {
      try {
        const ua: any = navigator.userAgent.toLowerCase()
        if (ua.match(/MicroMessenger/i) != null && ua.match(/MicroMessenger/i)[0] === 'micromessenger') {
        // eslint-disable-next-line no-undef
          WeixinJSBridge.invoke(
            'getBrandWCPayRequest', {
              appId: res.pay_data.appId,
              timeStamp: res.pay_data.timeStamp,
              nonceStr: res.pay_data.nonceStr,
              package: res.pay_data.package,
              signType: res.pay_data.signType,
              paySign: res.pay_data.sign
            },
            function (rulut: any) {
              console.log(rulut, 'adsads')
              if (rulut.err_msg === 'get_brand_wcpay_request:ok') {
                Dialog.alert({
                  title: '温馨提示',
                  message: '支付成功'
                }).then(() => {
                  if (store.state.from.path === '/find/curriculum') {
                    router.replace({ path: '/find/curriculum', query: { id: route.query.paid_id } })
                  } else if (store.state.from.path === '/find/curriculum') {
                    router.replace({ path: '/find/activity', query: { id: route.query.paid_id, success: 1 } })
                  } else {
                    router.replace('/otherServices/order')
                  }
                })
              } else if (rulut.err_msg === 'get_brand_wcpay_request:cancel') {
                router.replace({ path: '/applyOf/weChat', query: { orderId: res.order_id, pay_type: 2, pay_method: 0, paid_id: route.query.paid_id, user_ids: route.query.user_ids } })
              } else {
                Dialog.alert({
                  title: '温馨提示',
                  message: '支付失败'
                }).then(() => {
                  router.replace({ path: '/applyOf/weChat', query: { orderId: res.order_id, pay_type: 2, pay_method: 0, paid_id: route.query.paid_id, user_ids: route.query.user_ids } })
                })
              }
            })
        } else {
          Dialog.alert({
            title: '温馨提示',
            message: '请用手机微信进入平台支付'
          })
        }
      } catch (error: any) {
        Toast(error.message)
      }
    } else if (res.pay_method === 3) {
      Dialog.alert({
        title: '温馨提示',
        message: '报名成功'
      }).then(() => {
        if (store.state.from.path === '/find/curriculum') {
          router.replace({ path: '/find/curriculum', query: { id: route.query.paid_id } })
        } else if (store.state.from.path === '/find/curriculum') {
          router.replace({ path: '/find/activity', query: { id: route.query.paid_id, success: 1 } })
        } else {
          router.replace('/otherServices/order')
        }
      })
    } else {
      Toast('创建失败')
    }
  } catch (error: any) {
    Toast(error.message)
  }
}

const submit = throttle(async () => {
  try {
    console.log(integralStatus2.value)
    if (integralStatus2.value.length > 0) {
      if (checked.value > 0) {
        createOrder()
      } else {
        Toast('请选择支付方式')
      }
    } else {
      createOrder()
    }
  } catch (error: any) {
    Toast(error.message)
  }
  // router.push('/find')
}, 3000)

// const bank = () => {
//   createOrder()
// }

const confirm = async () => {
  show.value = false
  try {
    const res: any = await chooseIntegral({ pay_type: route.query.pay_type, paid_id: route.query.paid_id, integral: value.value, user_ids: route.query.user_ids ? JSON.parse(route.query.user_ids) : '' })
    price.value = res.price
    integralPush.value = res.integral
    value.value = res.integral
    setValue.value = res.integral
    console.log(setValue.value)
  } catch (error: any) {
    Toast(error.message)
  }
}
</script>

<style lang="less" scoped>
.pay {
  padding: 0 30px 80px;
  margin-top: 40px;
  .paySet {
    background-color: #fff;
    padding: 15px 0;
    border-radius: 5px;
    .icon {
      display: inline-block;
      width: 25px;
      height: 25px;
      margin-right: 9px;
    }
    .title {
      padding: 0 15px;
      margin-bottom: 20px;
    }
  }
  .login_content {
    margin-top: 20px;
    .contentInfo {
      width: 100%;
      background: #fff;
      border-radius: 10px;
      margin: 20px 0;
      .contentInfoBox {
        padding: 15px;
        p:last-child {
          margin-top: 25px;
        }
      }
    }
    .signNum {
      background: #fff;
      padding: 15px;
      border-radius: 5px;
      margin-bottom: 20px;
      .icon {
        width: 17px;
        height: 17px;
        margin-right: 7px;
      }

      .count_num {
        width: 86px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        background: #f7f7f7;
        border-radius: 5px;
      }
    }
  }
  .leftw {
    width: 90px;
    display: inline-block;
  }
  .line {
    margin: 0 30px;
  }
  .setBnt {
    width: 98px;
    height: 30px;
    background: #12142e;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 400;
  }
}
.fexd_footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: #fff;
  box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);
  .footer_btn {
    padding: 0 30px;
    height: 100%;
    text-align: center;
    .agree {
      width: 114px;
      height: 44px;
      background: #ff7a1f;
      border-radius: 5px;
      text-align: center;
      line-height: 44px;
      margin-left: 9px;
    }
    .icon {
      width: 23px;
      height: 23px;
      margin-bottom: 2px;
    }
  }
}

.integral {
  padding: 30px;

  .integral_title {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #cacaca;
  }

  .integralTips {
    margin-top: 20px;
  }
  .integral_left {
    .icon {
      width: 17px;
      height: 17px;
      margin-right: 7px;
    }
  }

  .integral_box {
    margin-top: 17px;
  }
  .integral_right {
    .all {
      width: 96px;
      height: 30px;
      background: #12142e;
      border-radius: 5px;
      text-align: center;
      line-height: 30px;
      margin: 10px auto 0;
    }
  }
  .btn {
    width: 315px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    background: #ff7a1f;
    border-radius: 5px;
    margin-top: 40px;
  }
}

@media (min-width: 750px) {
  .pay {
    padding: 0 30px 80px;
    margin-top: 40px;
    .paySet {
      background-color: #fff;
      padding: 15px 0;
      border-radius: 5px;
      .icon {
        display: inline-block;
        width: 25px;
        height: 25px;
        margin-right: 9px;
      }
      .title {
        padding: 0 15px;
        margin-bottom: 20px;
      }
    }
    .login_content {
      margin-top: 20px;
      .contentInfo {
        width: 100%;
        background: #fff;
        border-radius: 10px;
        margin: 20px 0;
        .contentInfoBox {
          padding: 15px;
          p:last-child {
            margin-top: 25px;
          }
        }
      }
      .signNum {
        background: #fff;
        padding: 15px;
        border-radius: 5px;
        margin-bottom: 20px;
        .icon {
          width: 17px;
          height: 17px;
          margin-right: 7px;
        }

        .count_num {
          width: 86px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          background: #f7f7f7;
          border-radius: 5px;
        }
      }
    }
    .leftw {
      width: 90px;
      display: inline-block;
    }
    .line {
      margin: 0 30px;
    }
    .setBnt {
      width: 98px;
      height: 30px;
      background: #12142e;
      border-radius: 5px;
      font-size: 14px;
      font-weight: 400;
    }
  }
  .fexd_footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: #fff;
    box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);
    .footer_btn {
      padding: 0 30px;
      height: 100%;
      text-align: center;
      .agree {
        width: 114px;
        height: 44px;
        background: #ff7a1f;
        border-radius: 5px;
        text-align: center;
        line-height: 44px;
        margin-left: 9px;
      }
      .icon {
        width: 23px;
        height: 23px;
        margin-bottom: 2px;
      }
    }
  }

  .integral {
    padding: 30px;

    .integral_title {
      text-align: center;
      padding-bottom: 20px;
      border-bottom: 1px solid #cacaca;
    }

    .integralTips {
      margin-top: 20px;
    }
    .integral_left {
      .icon {
        width: 17px;
        height: 17px;
        margin-right: 7px;
      }
    }

    .integral_box {
      margin-top: 17px;
    }
    .integral_right {
      .all {
        width: 96px;
        height: 30px;
        background: #12142e;
        border-radius: 5px;
        text-align: center;
        line-height: 30px;
        margin: 10px auto 0;
      }
    }
    .btn {
      width: 315px;
      height: 44px;
      line-height: 44px;
      text-align: center;
      background: #ff7a1f;
      border-radius: 5px;
      margin-top: 40px;
    }
  }
}
</style>
